@use "scss/colors";
@use "scss/variables";
@use "scss/connection/stream-status-colors";

.status {
  @each $name, $color, $bg-color in stream-status-colors.$by-stream-status {
    &--#{$name} {
      .icon {
        position: relative; // for positioning the spinner
        width: 24px; // toss out slight differences from svg files
        height: 24px;
        color: $color;
      }

      &-withBox {
        border-radius: variables.$border-radius-xs;
        background-color: $bg-color;
      }
    }
  }
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}
